<template>
  <div class="scrollbar">
    <el-scrollbar>
      <el-form label-position="left" :model="selectTable" ref="addForm" label-width="100px" :inline="false" autocomplete="off" size="mini">
        <el-row :gutter="20" class="line">
          <el-col style="text-align:center;">
            <b>专家认证审核</b>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="真实姓名" prop="realName" :rules="[rule[0]]">
              <span v-if="selectTable.authentication_status===1">{{selectTable.realName}}</span>
              <el-input v-else placeholder="请输入" v-model="selectTable.realName" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分析师名称" prop="expertName" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.expertName" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专家头像" prop="expertAvatar" :rules="[rule[0]]">
              <singleImage v-model="selectTable.expertAvatar"></singleImage>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分析师介绍" prop="expertDesc" :rules="[rule[0]]">
              <el-input type="textarea" placeholder="请输入" v-model="selectTable.expertDesc" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="line">
          <el-col :span="12">
            <el-form-item label="风格标签">
              {{selectTable.tags.join(',')}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="擅长领域">
              {{selectTable.domains.join(',')}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系地址" prop="address1" :rules="[rule[0]]">
              <area-cascader type='text' v-model="selectTable.address1" :level='1' :data="pcaa"></area-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="街道/门牌号" prop="contactDetail" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.contactDetail" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="info">
          <el-col :span="12">
            <el-form-item label="所在地" prop="address2" :rules="[rule[0]]">
              <area-cascader type='text' v-model="selectTable.address2" :level='1' :data="pcaa"></area-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="街道/门牌号" prop="locusDetail" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.locusDetail" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="line">
          <el-col :span="12">
            <el-form-item label="所属公司" prop="company">
              <el-input placeholder="请输入" v-model="selectTable.company" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ号" prop="qq" :rules="[rule[0]]">
              <el-input placeholder="请输入" v-model="selectTable.qq" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信号" prop="wechat">
              <el-input placeholder="请输入" v-model="selectTable.wechat" maxLength="200"></el-input>
            </el-form-item>
            <el-form-item label="二维码类型" prop="qrcodeType">
              <el-radio-group v-model="selectTable.qrcodeType">
                <el-radio label="0">个人</el-radio>
                <el-radio label="1">公众号</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="二维码" prop="qrcode">
              <singleImage v-model="selectTable.qrcode"></singleImage>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input placeholder="请输入" v-model="selectTable.email" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专属网址" prop="personalAddress">
              <el-input placeholder="请输入" v-model="selectTable.personalAddress" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="line">
          <el-col :span="12">
            <el-form-item label="身份证号">
              {{selectTable.certifyNumber}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="认证资质">
              {{selectTable.position}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证图片">
              <a :href="selectTable.certifyPic" target="_blank"><img :src="selectTable.certifyPic" class="img"></a>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执业资质">
              <a :href="item" v-if="selectTable.positionPic" v-for="item in selectTable.positionPic.split(',')" target="_blank"><img :src="item" class="img"></a>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="审核" prop="status" :rules="[{required: true, message: '必填项', trigger: 'change'}]" v-if="selectTable.statusO==='1'">
              <el-radio v-model="selectTable.status" label="5">审核不通过</el-radio>
              <el-radio v-model="selectTable.status" label="10">审核成功</el-radio>
            </el-form-item>
            <el-form-item label="审核状态" prop="status" v-else>
              {{{'5':'审核不通过','10':'审核成功'}[selectTable.status]}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="selectTable.status==='5'">
          <el-col>
            <el-form-item label="原因" prop="reason" :rules="[{required: true, message: '必填项', trigger: 'change'}]">
              <el-input type="textarea" placeholder="请输入" v-model="selectTable.reason" maxLength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <div v-loading="pload" class="footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submitForm('addForm')" v-if="selectTable.statusO==='1'">确 定</el-button>
    </div>
  </div>
</template>
<style lang="scss">
.area-select .area-selected-trigger {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 30px;
  font-size: 12px;
}
</style>

<style lang="scss" scoped>
.scrollbar {
  height: 100%;
  overflow: hidden;
  padding-bottom: 50px;
  position: relative;
  .el-scrollbar {
    height: 100%;
  }
  .line {
    margin-bottom: 20px;
    border-bottom: 1px #e4e4e4 solid;
    padding-bottom: 20px;
  }
  .el-form {
    padding: 20px;
  }
  .info {
    font-size: 14px;
    color: #666;
    .el-col {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .img {
    display: block;
    width: 173px;
    height: 173px;
  }
  .title {
    text-align: center;
    font-size: 16px;
    border-bottom: 1px #e4e4e4 solid;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .footer {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
}
</style>
<script>
import Vue from 'vue'
import { pcaa } from 'area-data'
import 'vue-area-linkage/dist/index.css'
import VueAreaLinkage from 'vue-area-linkage'
Vue.use(VueAreaLinkage)
import * as api from '@/utils/api'
export default {
  props: {
    data: Object
  },
  created() {
    this.selectTable = this.JSONs(this.data)
    this.selectTable.statusO = this.JSONs(this.data).status
    this.selectTable.address1 = [this.selectTable.contactProvince, this.selectTable.contactCity, this.selectTable.contactDistrict]
    this.selectTable.address2 = [this.selectTable.locusProvince, this.selectTable.locusCity, this.selectTable.locusDistrict]
    if (this.selectTable.status === '1') {
      this.selectTable.status = ''
    }
  },
  components: {
    singleImage: () => import('@/components/Upload/singleImage')
  },
  watch: {
    show(newVal) {
      this.$emit('close')
    }
  },
  computed: {
    title() {
      if (this.id) {
        return '修改'
      } else {
        return '添加'
      }
    }
  },
  data() {
    return {
      pcaa: pcaa,
      pload: false,
      rule: [
        { required: true, message: '必填项', trigger: 'change' }
      ],
      show: true,
      selectTable: {}
    }
  },
  methods: {
    async submitForm(formName) {
      await this.$refs[formName].validate()
      try {
        this.pload = true
        this.selectTable.contactProvince = this.selectTable.address1[0]
        this.selectTable.contactCity = this.selectTable.address1[1]
        this.selectTable.contactDistrict = this.selectTable.address1[2]
        this.selectTable.locusProvince = this.selectTable.address2[0]
        this.selectTable.locusCity = this.selectTable.address2[1]
        this.selectTable.locusDistrict = this.selectTable.address2[2]
        await api.auditExpertModify(this.selectTable)
        this.$notify({ title: '操作成功', type: 'success', duration: 5000 })
        this.$emit('close')
        this.$emit('getData')
      } catch (e) {
        this.pload = false
      }
    }
  }
}
</script>